<template>
<l-layout v-if="ready" class="l-tab-page">
    <l-panel style="padding:0;" >
        <template #toolLeft >
            <div class="l-panel--item" >
                <l-select v-model="field" size="mini" :options="columnOptions"></l-select>
            </div>
            <div class="l-panel--item" style="width:320px;" >
                <el-input  :placeholder="$t('请输入查询关键字')"  @keyup.enter.native="hanleSearch" v-model="keyword" size="mini" >
                    <el-button :loading="tableLoading" @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </template>
        <div class="l-rblock" >
            <l-table 
                ref="mainTable"
                :columns="columns" 
                :dataSource="tableData" 
                :loading="tableLoading"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage" 
                >
            </l-table>
        </div>
    </l-panel>
</l-layout>
</template>

<script>

const api = window.$api.data.dbsource
export default {
    props: {
        code:String
    },
    data () {
        return {

            field:'',
            keyword:'',
            tableData:[],
            tableLoading:false,
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,

            ready:false
        };
    },
    created () {
    },
    mounted () {
    },
    computed:{
        col(){
            const list = this.lr_dataSourceCol[this.code] || []
            return list
        },
        columns(){
            const res = []
            this.col.forEach(name=>{
                res.push({label:name,prop:name.toLowerCase(),minWidth:'160'})
            })
            return res
        },
        columnOptions(){
            const res = []
            this.col.forEach(name=>{
                res.push({label:name,value:name.toLowerCase()})
            })
            return res
        }

    },
    methods:{
        async init(){
            this.ready = false
            await this.$awaitWraper(this.lr_loadDataSourceColNames(this.code,false))
            await this.loadTableData()
            this.ready = true
        },
        async loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let whereSql = ''
            if(this.keyword && this.field){
                whereSql = `${this.field} like '%${this.keyword}%'`
            }


            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:this.columns[0].prop,
                whereSql:whereSql
            }
            const data = await this.$awaitWraper(api.getDataPage(this.code,queryData))
            this.tableData = data.rows
            this.tableTotal = data.records
            this.tableLoading = false
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        hanleSearch(){
            this.loadTableData()
        },
        resetForm(){
            this.tableData = []
        }
    }
}
</script>